import jQuery from "jquery";
window.jQuery = window.$ = jQuery;
import "popper.js";
import "bootstrap";

import http from "axios";

Promise.all([
  http({
    url: "https://gank.io/api/v2/categories/Girl",
  }),
  http({
    url: "https://gank.io/api/v2/categories/Article",
  }),
])
  .then((res) => {
    let menuData = [];
    res.forEach((item) => {
      const { data } = item.data;
      menuData = [...menuData, ...data];
    });

    menuData.forEach((item) => {
      const { title } = item;
      // console.log(item)
      jQuery(`<li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">${title}</a>
        </li>`).appendTo(".my-menu");
    });
  })
  .catch((e) => {
    console.log(e);
  });

// list html

let page = 1;
let count = 20;

let hasNextPage = true;

const getArticles = function (type = "All") {
  console.log(type, page);
  http({
    url: `https://gank.io/api/v2/data/category/Girl/type/${type}/page/${page}/count/${count}`,
  })
    .then((res) => {
      if (res.data.length < count) {
        hasNextPage = false;
      }
      const { data } = res.data;
      console.info(res.data);
      console.log(data);
      data.forEach((item) => {
        console.log(item);
        const { images, desc, title, _id: id } = item;
        jQuery(`<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <div class="card">
        <img src="${images[0]}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">${title}</h5>
          <p class="card-text">${desc}</p>
          <a href="./article.html?id=${id}" class="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>`).appendTo(".my-list");
      });
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      console.log("ok!");
    });
};

getArticles();
let type = "All";

$(".my-menu").on("click", "a", function () {
  page = 1;
  hasNextPage = true;
  type = $(this).data("type");
  getArticles(type);
});

$(".next-page").on("click", function () {
  $(".my-list").html("");
  if (hasNextPage) {
    page += 1;
    getArticles(type);
  } else {
    alert("没有更多数据了");
  }
});

$(".prev-page").on("click", function () {
  $(".my-list").html("");
  if (page <= 1) {
    page = 1;
    getArticles(type);
    alert("没了");
  } else {
    page -= 1;
    getArticles(type);
  }
});

http({
  method: "GET",
  url: "https://gank.io/api/v2/banners",
})
  .then((res) => {
    // success
    const { data } = res.data;
    console.log(data);
    data.forEach((item) => {
      const { image, title } = item;
      jQuery(`
            <div class="carousel-item ">
            <img src="${image}" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <p>${title}</p>
            </div>
          </div>`)
        .appendTo(".my-banner")
        .addClass("active")
        .siblings()
        .removeClass("active");
    });
  })
  .catch((e) => {
    // error
    console.log(e);
  })
  .finally(() => {
    console.log("已完成");
  });

jQuery(".suiji").on("click", () => {
  http({
    method: "GET",
    url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/50`,
  })
    .then((res) => {
      // success
      const { data } = res.data;
      console.log(data);
      let num = Math.round((Math.random() + 0.01) * 50);
      const media = document.querySelector(".media");
      media.style.backgroundImage = `url(${data[num].url})`;
      const time = document.querySelector(
        ".right .list-content .list-body a span"
      );
      console.log(time);
      time.innerHTML = data[num].title;
    })
    .catch((e) => {
      // error
      console.log(e);
    })
    .finally(() => {
      console.log("已完成");
    });
});
